import { Text, StyleSheet, View, Image, SafeAreaView, Dimensions, TouchableWithoutFeedback, TouchableOpacity, ActivityIndicator } from 'react-native'
import React, { Component } from 'react'
import { Button, InputItem, Toast } from '@ant-design/react-native'
import { pTx } from "../../utils/dimensions"
import { createWallet } from 'react-native-web3-wallet';
import ShadowCard from "../../utils/shadowCard"
import LinearGradient from 'react-native-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default class Password extends Component {

    constructor(props) {
        super(props)
        this.state = {
            password: '',
            password2: '',
            iconType: true,
            loading: false,
            name: props.route.params.name
        }
    }
    setPassword = async () => {
        try {
            if (!this.state.password) return
            if (this.state.password && this.state.password.length < 6 || this.state.password.length > 18) {
                Toast.info('请输入6位到18位密码')
                return
            } else if (this.state.password != this.state.password2) {
                Toast.info('密码不一致')
                return
            }
            this.setState({ loading: true })
            if (this.state.name == "backupMnemonic") {
                await createWallet(this.state.password, "m/44'/60'/0'/0/0")
                    .then(async (res) => {
                        this.props.navigation.navigate('newMnemonicPhrase', { wallet: res, password: this.state.password })
                    })
                    .catch(err => {
                        console.log(err);
                    });
            } else {
                this.props.navigation.navigate('importWallet', { password: this.state.password })
            }
        } catch (error) {
            console.log(error)
        }
        this.setState({ loading: false })
    }

    render() {
        return (
            <SafeAreaView>
                <View style={styles.page}>
                    <View style={styles.titleBox}>
                        <Text style={styles.name}>设置密码 {this.state.count}</Text>
                        <Text style={[styles.label, { alignSelf: 'center' }]}>登录时需要使用此密码，请确保妥善保管。</Text>
                    </View>
                    <View>
                        <Text style={styles.label}>密码</Text>
                        <View style={styles.InputItem}>
                            <InputItem
                                type={this.state.iconType ? 'password' : 'text'}
                                value={this.state.password}
                                onChange={(value) => {
                                    this.setState({
                                        password: value
                                    })
                                }}
                                extra={
                                    <TouchableWithoutFeedback onPress={() =>
                                        this.setState({
                                            iconType: this.state.iconType ? false : true
                                        })
                                    } >
                                        <View style={{ height: 47, alignSelf: "center", justifyContent: "center" }}>
                                            <Image style={styles.iconType} source={this.state.iconType ? require('../../assets/image/icon-passwordHide.png') : require('../../assets/image/icon-password.png')}></Image>
                                        </View>
                                    </TouchableWithoutFeedback>}>
                            </InputItem>
                        </View>
                        <Text style={styles.label}>重新输入密码</Text>
                        <View style={styles.InputItem}>
                            <InputItem
                                type={this.state.iconType ? 'password' : 'text'}
                                value={this.state.password2}
                                onChange={(value) => {
                                    this.setState({
                                        password2: value,
                                    })
                                }}
                                extra={
                                    <TouchableWithoutFeedback onPress={() =>
                                        this.setState({
                                            iconType: this.state.iconType ? false : true
                                        })
                                    } >
                                        <View style={{ height: 47, alignSelf: "center", justifyContent: "center" }}>
                                            <Image style={styles.iconType} source={this.state.iconType ? require('../../assets/image/icon-passwordHide.png') : require('../../assets/image/icon-password.png')}></Image>
                                        </View>
                                    </TouchableWithoutFeedback>}>
                            </InputItem>
                        </View>
                    </View>
                </View>
                <View style={styles.footerButton}>
                    <ShadowCard style={styles.button}>
                        <LinearGradient
                            colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
                            start={{ x: 0.25, y: 0.25 }}
                            end={{ x: 0.75, y: 0.75 }}
                            style={[styles.linearGradient]}>
                            <TouchableOpacity type="primary" disabled={this.state.loading} style={[styles.button]} onPress={this.setPassword}>
                                <>
                                    {this.state.loading ? <ActivityIndicator /> : ""}
                                    <Text style={styles.ButtonText}>下一步</Text>
                                </>
                            </TouchableOpacity>
                        </LinearGradient>
                    </ShadowCard>
                </View>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
    page: {
        height: Dimensions.get('screen').height - pTx(260),
        paddingHorizontal: pTx(36),
    },
    titleBox: {
        paddingTop: pTx(30),
        paddingBottom: pTx(40)
    },
    name: {
        alignSelf: "center",
        fontSize: pTx(24),
        color: "rgba(10, 12, 20, 1)"
    },
    label: {
        marginTop: pTx(22),
        fontSize: pTx(12),
        color: "rgba(114, 114, 114, 1)"
    },
    InputItem: {
        marginTop: pTx(16),
        marginLeft: 0,
        paddingLeft: 0,
        height: pTx(47),
        fontSize: pTx(16),
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderWidth: 0,
        borderRadius: 6,
        overflow: "hidden",
        justifyContent: "center"
    },
    iconType: {
        height: pTx(20),
        width: pTx(20),
        alignSelf: "center",

    },
    footerButton: {
        paddingTop: pTx(15),
        paddingBottom: pTx(63),
        alignItems: "center"
    },
    linearGradient: {
        borderRadius: 6
    },
    button: {
        width: pTx(303),
        height: pTx(55),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    ButtonText: {
        color: "rgba(10, 12, 20, 1)",
        fontSize: pTx(14),
        fontWeight: 'bold'
    }
})
